<template>
  <div class="quan">
    <div class="photo1">
      <img src="../assets/qrCode/title.jpg" />
    </div>
    <div class="present">
        <div class="present-L"><i class="el-icon-box present-L-1"></i>当前扫描产品</div>
        <div class="present-R">{{ od.productName }}</div>
    </div>
    <el-collapse accordion>
      <el-collapse-item>
        <template slot="title">
         <i class="el-icon-document-checked table-title"></i>合格证信息
        </template>
        <div class="zhuisu">
          <div class="zhuisu-box">
            <p class="zhuisu-title">宁夏食用农产品合格证---追溯凭证</p>
            <p class="zhui-bianma">合格证编号:<br />{{ certificateCode }}</p>
            <div class="zhuisu-box-top">
              <p>食用农产品名称:{{ productName }}</p>
              <p>
                包装的食品数量(重量):{{ productPackagedInfo.packageNum
                }}{{ productPackagedInfo.packageUnit }}
              </p>
              <p>生产者盖章或签名:{{ plantEnterpriseInfo.enterName }}</p>
              <p>确保合格的方式:自检合格</p>
              <p>联系人:{{ enterContactsInfo.contactsName }}</p>
              <p>联系方式:{{ enterContactsInfo.contactsPhone }}</p>
              <p>上报日期:{{ reportingTime }}</p>
              <p>基地地址:{{ plantEnterpriseInfo.enterAddress }}</p>
              <div class="zhuisu-box-left">
                <p class="chengnuo">我承诺对产品质量安全以及合格证真实性负责</p>
                <p class="el-icon-success">
                  &nbsp;&nbsp;我不使用禁限用农药兽药
                </p>
                <p class="el-icon-success">&nbsp;&nbsp; 不使用非法添加剂</p>
                <p class="el-icon-success">
                  &nbsp;&nbsp;遵守农药安全间隔期,兽药休药规定
                </p>
                <p class="el-icon-success last">
                  &nbsp;&nbsp;销售的食品农产品符合农药兽药残留食品安全国家标准
                </p>
              </div>
            </div>
          </div>
        </div>
      </el-collapse-item>
      <el-collapse-item>
        <template slot="title">
           <i class="el-icon-grape table-title"></i>产品信息
        </template>
        <div class="pMation-top">
          <el-divider>产品信息</el-divider>
        </div>
        <div class="pMation-bottom">
          <div>
            <span class="pMation-1">产品名称</span
            ><span class="pMation-2">{{ od.productName }}</span>
          </div>
          <div>
            <span class="pMation-1">追溯码&nbsp;</span
            ><span class="pMation-2">{{
              od.productTestInfo.productTraceCode
            }}</span>
          </div>
          <div>
            <span class="pMation-1">产品类别</span
            ><span class="pMation-2">{{
              od.productPackagedInfo.industry
            }}</span>
          </div>
          <div>
            <span class="pMation-1">收货数量</span
            ><span class="pMation-2"> {{od.producetHarvestInfo.productNum}}{{od.producetHarvestInfo.productUnit}}</span>
          </div>
          <div>
            <span class="pMation-1">收货时间</span
            ><span class="pMation-2">{{od.producetHarvestInfo.productDate}}</span>
          </div>
          <div>
            <span class="pMation-1">确保合格方式</span
            ><span class="pMation-2">{{
              od.productTestInfo.qualityConclusion
            }}</span>
          </div>
          <div>
            <span class="pMation-1">负责人&nbsp;</span
            ><span class="pMation-2">{{
              od.enterContactsInfo.contactsName
            }}</span>
          </div>
        </div>
      </el-collapse-item>
      <el-collapse-item>
        <template slot="title">
         <i class="el-icon-document-copy table-title"></i> 企业信息
        </template>
        <div class="pMation-top">
          <el-divider>企业信息</el-divider>
        </div>
        <div class="trace-1">
          <span class="pMation-1">主体名称</span
          ><span class="pMation-2">{{ od.plantEnterpriseInfo.enterName }}</span>
        </div>
        <div class="trace-1">
          <span class="pMation-1">主体地址&nbsp;</span
          ><span class="pMation-2">{{
            od.plantEnterpriseInfo.enterAddress
          }}</span>
        </div>
        <div class="trace-1">
          <div id="container"></div>
        </div>
        <div class="trace-1">
          <span class="pMation-1">联系人&nbsp;</span
          ><span class="pMation-2">{{
            od.enterContactsInfo.contactsName
          }}</span>
        </div>
        <div class="trace-1">
          <span class="pMation-1">联系方式&nbsp;</span
          ><span class="pMation-2">{{
            od.enterContactsInfo.contactsPhone
          }}</span>
        </div>
        <div class="trace-1">
          <span class="pMation-1">主体身份码&nbsp;</span
          ><span class="pMation-2">{{
            od.plantEnterpriseInfo.enterIdcard
          }}</span>
        </div>

        <div class="pMation-top">
          <el-divider>基地信息</el-divider>
        </div>
        <div class="trace-1">
          <span class="pMation-1">基地名称</span
          ><span class="pMation-2">{{od.plantBaseInfo.baseName}}</span>
        </div>
        <div class="trace-1">
          <span class="pMation-1">基地面积</span
          ><span class="pMation-2">{{od.plantBaseInfo.baseMeasure}}{{od.plantBaseInfo.areaUnit}}</span>
        </div>
        <div class="trace-1">
          <span class="pMation-1">负责人</span
          ><span class="pMation-2">{{od.plantBaseInfo.baseChargePerson}}</span>
        </div>
        <div class="trace-1">
          <span class="pMation-1">联系方式</span
          ><span class="pMation-2">{{od.plantBaseInfo.chargePhone}}</span>
        </div>
        <div class="trace-1">
          <span class="pMation-1">基地照片</span
          ><span class="pMation-2 baseImg"><img :src="od.plantBaseInfo.baseImg" /></span>
        </div>
      </el-collapse-item>
      <el-collapse-item>
        <template slot="title">
          <i class="el-icon-refresh table-title"></i>溯源信息
        </template>
        <div class="pMation-top">
          <el-divider>产品检测信息</el-divider>
        </div>
        <div class="trace-bottom">
          <div class="trace-1">
            <span class="pMation-1">检测类型</span
            ><span class="pMation-2">快速检测</span>
          </div>
          <div class="trace-1">
            <span class="pMation-1">检测结论&nbsp;</span
            ><span class="pMation-2">{{
              od.productTestInfo.qualityConclusion
            }}</span>
          </div>
          <div class="pMation-top">
            <el-divider>产品检测报告</el-divider>
          </div>

          <p class="trace-oimg"><img :src="od.productTestInfo.qualityImg" /></p>
          <div class="pMation-top">
            <el-divider>产品包装信息</el-divider>
          </div>
          <div class="trace-1">
            <span class="pMation-1">包装数量</span
            ><span class="pMation-2"
              >{{ od.productPackagedInfo.packageNum
              }}{{ od.productPackagedInfo.packageUnit }}</span
            >
          </div>
          <div class="trace-1">
            <span class="pMation-1">包装时间&nbsp;</span
            ><span class="pMation-2">{{
              od.productPackagedInfo.packageTime
            }}</span>
          </div>
        </div>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script>
import { Collapse } from "element-ui";
import axios from "axios";
export default {
  created() {
    if (this.$route.query.id) {
      this.id = this.$route.query.id;
      this.list(this.id);
    }
  },
  data() {
    return {
      id: "",
      // 地图属性
      viewMode: "3D",
      zoom: 12,
      center: [116.4, 39.92],
      resizeEnable: true,
      map: "",
      map2: "",
      total: 0,
      infoWindow: "",

      od: {
        productTestInfo: {},
        enterContactsInfo: {},
        plantEnterpriseInfo: {},
        productPackagedInfo: {},
        producetHarvestInfo:{},
        plantBaseInfo:{}

      },
      activeName: "1",
      certificateCode: "",
      productName: "",
      productPackagedInfo: {},
      plantEnterpriseInfo: {},
      enterContactsInfo: {},
      reportingTime: "",
      MixinUploadAllApi: process.env.VUE_APP_BASE_API + "/file/",
    };
  },
  methods: {
    list(str) {
      this.id = str;
      axios({
        url: this.MixinUploadAllApi + str,
      }).then((res) => {
        this.certificateCode = res.data.data.certificateCode;
        this.productName = res.data.data.productName;
        this.productPackagedInfo = res.data.data.productPackagedInfo;
        this.plantEnterpriseInfo = res.data.data.plantEnterpriseInfo;
        this.enterContactsInfo = res.data.data.enterContactsInfo;
        this.reportingTime = res.data.data.reportingTime;

        this.od = res.data.data;

        // 地图
        this.map2 = res.data.data.plantEnterpriseInfo;
        this.map1();
      });
    }, // 地图的设置
    map1() {
      this.zoom = 11;
      this.map = new AMap.Map("container", {
        viewMode: this.viewMode,
        zoom: this.zoom,
        center: [this.map2.longitude, this.map2.dimension],
        resizeEnable: this.resizeEnable,
      });

      var text = new AMap.Text({
        text: this.map2.enterName,
        anchor: "center", // 设置文本标记锚点
        draggable: false,
        cursor: "pointer",
        angle: 10,
        style: {
          padding: ".75rem 1.25rem",
          "margin-bottom": "1rem",
          "border-radius": ".25rem",
          "background-color": "white",
          "border-width": 0,
          "box-shadow": "0 2px 6px 0 rgba(114, 124, 245, .5)",
          "text-align": "center",
          "font-size": "12px",
          color: "blue",
        },
        title: this.map2.enterName,
        clickable: true,
        position: [this.map2.longitude, this.map2.dimension],
      });
      text.setMap(this.map);
    },
  },
};
</script>

<style lang="scss">
.zhui-bianma {
  word-break: normal;
  white-space: pre-warp;
  word-wrap: break-word;
}

body {
  padding: 10px 15px;
  box-sizing: border-box;
}
.photo1 {
  width: 100%;
  height: 200px;
  img {
    width: 100%;
    height: 100%;
  }
}

.zhuisu {
  font-size: 14px;
  width: 100%;
}
.zhuisu-box {
  width: 100%;
  padding: 0 15px;
  box-sizing: border-box;
  p {
    // height: 17px;
  }
  .zhuisu-title {
    width: 100%;
    color: black;
    font-weight: 700;
    font-size: 16px;
    text-align: center;
  }
  .zhuisu-box-top {
    width: 100%;
    float: left;
  }
  .zhuisu-box-left {
    margin-bottom: 20px;
    // margin-left: 10px;
    .chengnuo {
      font-weight: 700;
      color: black;
      font-size: 15px;
    }
    p {
      width: 100%;
      line-height: 17px;
      height: 17px;
    }
  }
}
.last {
  height: 50px !important;
  line-height: 24px !important;
  // border: 1px solid black;
}
.photo img {
  width: 150px;
  height: 150px;
  margin-left: 5px;
}

// 产品信息
.pMation-bottom {
  div {
    width: 100%;
    float: left;
  }
}

.trace-1 {
  width: 100%;

  float: left;
}
.pMation-1 {
  float: left;
  width: 25%;
  min-width: 100px;
  font-size: 14px;
  color: rgb(9, 139, 96);
}
.pMation-2 {
  display: block;
  width: 67%;
  min-width: 200px;
  color: rgb(22, 70, 11);
  float: left;
  overflow: hidden; /*超出部分隐藏*/
  white-space: nowrap; /*不换行*/
  text-overflow: ellipsis; /*超出部分文字以...显示*/
}
// 分割线
.pMation-top {
  width: 100%;
  margin: 0 auto;
  float: left;
}
.trace-oimg {
  width: 100%;
  float: left;
  display: flex;
  justify-content: center;
  img {
    width: 50%;
    height: 100%;
  }
}
#container {
  height: 200px;
  width: 80%;
  min-width: 300px;
  margin: 0 auto;
  float: left;
  border: 4px solid rgba(113, 183, 216, 0.3);
}
 .table-title{
   font-size: 16px;
   margin-right: 5px;
 }


// 基地图片
.baseImg{
  width: 100%;
  height: 200px;
}
// 当前扫描产品
.present{

  width: 98%;
  height: 30px;
  line-height: 30px;
  border: #999 solid 1px;
  margin: 10px auto;
  padding: 0 5px;
  .present-L{
    width: 50%;
    float: left;
    text-align: left;
    font-size: 12px;
    .present-L-1{
      font-size: 16px;
      margin-right: 5px;
    }
  }
  .present-R{
    width: 50%;
    float: left;
    color: rgb(50, 173, 20);
    text-align: right;
  }
}

</style>